import AvatarDrawing from "@/components/AvatarDrawing";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";
import { getDatetime } from "taehui-ts/date";

export default function LatestAvatarView({
  avatarID,
  avatarName,
  date,
}: {
  avatarID: string;
  avatarName: string;
  date: string;
}) {
  return (
    <Row>
      <Col xs="auto">
        <AvatarDrawing avatarID={avatarID} />
      </Col>
      <Col>
        <Stack gap={2}>
          <span>{avatarName}</span>
          <span>{getDatetime(date)}</span>
        </Stack>
      </Col>
    </Row>
  );
}